<template>
  <div>
    <div class="proDetail">
      <div class="proImg">
        <span :class="['style', testDetailObj.type==='s' ? 't' : '']"  v-html="testDetailObj.type==='s' ? '特价':'免费'"></span>
        <img :src="testDetailObj.picture" />
      </div>
      <div class="proInfo">
        <h2> {{ testDetailObj.title }}</h2>
        <ul class="des">
          <li v-for="item in testDetailObj.subtitle">·{{ item }}</li>
        </ul>
      </div>
    </div>
    <div class="proState">
       <p>
         <i>{{testDetailObj.countAvailable}}<b>/{{testDetailObj.total}}</b></i>
         <span>剩余/总量</span>
       </p>
       <p>
         <i>{{testDetailObj.numberOfParticipants}}</i>
         <span  v-if="testDetailObj.type==='s'">人已参加</span>
         <span  v-if="testDetailObj.type==='f'">人已申请</span>
       </p>
    </div>
    <ul class="process" v-if="testDetailObj.type==='s'">
      <li>低价购买</li>
      <li>收货测评</li>
      <li>提交报告</li>
      <li>入选得返利</li>
    </ul>
    <ul class="process" v-else>
      <li>免费申请</li>
      <li>公布名单</li>
      <li>产品测试</li>
      <li>提交报告</li>
    </ul>
    <div class="comment-lists" v-if="(testDetailObj.status === 11 || testDetailObj.status ===23) && testDetailObj.contents!=''">
      <h3>听听众测达人怎么说</h3>
        <ul class="lists">
          <li v-for = "item in testDetailObj.contents">
          <div class="userinfo">
            <a :href="'../commentDetail/commentDetail.'+isHtml +'?sid='+testDetailObj.sid+'&id='+item.id" class="txt" ca="zc_v170804_zcdetail_wzclick">
              <h2 class="thumb"><img :src="item.thumb" /></h2>
              <div class="infos">
                <p class="username">{{item.name}}</p>
                <p class="des">{{ item.title }}</p>
              </div>
            </a>
          </div>              
        </li>
      </ul>
      <a href="javascript:;" @click="pingUrl(testDetailObj)" ca="zc_v170804_zcdetail_wzclick" class="more">查看更多</a>   
    </div>
    <!--<div class="slide">
      <img :src="testDetailObj.picture" />
      <span class="type" v-if="testDetailObj.type==='s'">特价众测</span>
      <span class="type" v-else>免费众测</span>
    </div>
    <div class="goods-detail">
       <h2>{{testDetailObj.title}}</h2>
       <p class="des">
       <span v-for="item in testDetailObj.subtitle">{{item}}</span>
       </p>
       <div class="time" v-if="testDetailObj.status===11||testDetailObj.status===23"> 
       <cite>已结束</cite>
       <span>剩余{{testDetailObj.countAvailable}}份</span>
       </div>
       <div class="time" v-else> 
       <cite><i>{{dd}}</i><b>天</b><i>{{hh}}</i><b>时</b><i>{{mm}}</i><b>分</b><i>{{ss}}</i><b>秒后结束</b></cite>
       <span>剩余{{testDetailObj.countAvailable}}份</span>
       </div>
       <div class="price"  v-if="testDetailObj.type==='s'">众测价格：<strong><b>¥</b><i>{{testDetailObj.salePrice}}</i></strong><span>¥{{testDetailObj.price}}</span><cite><i>{{testDetailObj.numberOfParticipants}}</i>人已参与测评</cite></div>
       <div class="price" v-else >众测价格：<strong><b>¥</b><i>{{testDetailObj.salePrice}}</i></strong><span>¥{{testDetailObj.price}}</span><cite><i>{{testDetailObj.numberOfParticipants}}</i>人已申请</cite></div>
    </div>
    <ul class="info" v-if="testDetailObj.type==='s'" style="display:-webkit-box;">
      <li style="-webkit-box-flex:1;"><i class="icon01"><img src="../../../assets/image/publicTest/info-icon01.png" /></i>低价购买</li>
      <li style="-webkit-box-flex:1;"><i class="icon02"><img src="../../../assets/image/publicTest/info-icon02.png" /></i>收货测评</li>
      <li style="-webkit-box-flex:1;"><i class="icon03"><img src="../../../assets/image/publicTest/info-icon03.png" /></i>提交报告</li>
      <li style="-webkit-box-flex:1;"><i class="icon04"><img src="../../../assets/image/publicTest/info-icon04.png" /></i>获得返利</li>
    </ul>
    <ul class="info" v-else style="display:-webkit-box;">
      <li style="-webkit-box-flex:1;"><i class="icon05"><img src="../../../assets/image/publicTest/info-icon05.png" /></i>免费申请</li>
      <li style="-webkit-box-flex:1;"><i class="icon06"><img src="../../../assets/image/publicTest/info-icon06.png" /></i>申请成功</li>
      <li style="-webkit-box-flex:1;"><i class="icon07"><img src="../../../assets/image/publicTest/info-icon07.png" /></i>到店体验</li>
      <li style="-webkit-box-flex:1;"><i class="icon08"><img src="../../../assets/image/publicTest/info-icon08.png" /></i>提交报告</li>
    </ul>-->
    <div class="test-people-list" v-if="GeekListObj.length>0">
    <h2 v-if="testDetailObj.type==='s'">众测达人名单</h2>
    <h2 v-else>成功入选名单</h2>
    <div class = "test-people-list-layout" :style="{height:peopleListHeight}">
      <ul>
        <li v-for="item in GeekListObj">
          <img :src="item.icon"/>
          <p>{{item.name}}</p>
        </li>
     <!--   <li>
      <img src="../../../assets/image/publicTest/pic01.png"/>
      <p>李嬷嬷</p>
           </li>
           -->
      </ul>
      </div>
      <p v-if="GeekListObj.length>12" class="more" @click="showPeopleListMore"><span class="morespan" :class="{arrowUp:arrowUp}">{{showMore}}</span></p>
    </div>
    <div class="product-intro">
      <h2>产品介绍</h2>
      <div class="content" v-html="testDetailObj.detail">
         <!-- <img src="../../../assets/image/publicTest/banner02.png" /> -->
      </div>
    </div>
    <div v-if="!isApp" class="download-banner">
       <a :href="downloadUrl" ca="zc_v170628_zcdetail_appclick">
       <p>车享家APP</p>
       <p>立即参与众测吧</p>
       <span>前往</span>
       </a>
    </div>
    <section v-if="isApp&&testDetailObj.status!==22&&testDetailObj.status!==21" class="sub-layout item-states flex">
      <div class="left">         
        <p class="statusBtn">
          <cite v-if="testDetailObj.status === 10">进行中</cite>
          <cite v-if="testDetailObj.status === 11 || testDetailObj.status === 23" class="end">已结束</cite>
          <span v-if="testDetailObj.status === 11 || testDetailObj.status === 23">去看看众测达人说了什么吧</span>
          <cite v-if="testDetailObj.status === 10" class="time"><i>{{dd}}</i><b>天</b><i>{{hh}}</i><b>时</b><i>{{mm}}</i><b>分</b><i>{{ss}}</i><b>秒后结束</b></cite>          
        </p>
      </div>
      <div class="right">
        <a href="javascript:;"  @click="goGoodsDetailUrl(testDetailObj.targetURL)"  :ca="'zc_v170628_zcdetail_lqclick'+testDetailObj.sid" v-if="testDetailObj.status === 10" class="btn">{{testDetailObj.salePrice}}元领取</a>
        <a  @click="startApply" ca="zc_v170628_zcdetail_sqclick" v-if="testDetailObj.status===21&&!testDetailObj.participate">立即申请</a>
        <a  href="javascript:;" ca="zc_v170804_zcdetail_wzmore_click"  @click="pingUrl(testDetailObj)" v-if="testDetailObj.status === 23 || testDetailObj.status === 11" class="btn">查看众测报告</a>
      </div>        
    </section>
    <section v-if="isApp&&testDetailObj.status==21&&!testDetailObj.participate" class="sub-layout item-states flex">
      <div class="left">         
        <p class="statusBtn">
          <cite >申请中</cite>
          <cite class="time"><i>{{dd}}</i><b>天</b><i>{{hh}}</i><b>时</b><i>{{mm}}</i><b>分</b><i>{{ss}}</i><b>秒后结束</b></cite>          
        </p>
      </div>
      <div class="right">
        <a href="javascript:;"  @click="goGoodsDetailUrl(testDetailObj.targetURL)"  :ca="'zc_v170628_zcdetail_lqclick'+testDetailObj.sid" v-if="testDetailObj.status === 10" class="btn">{{testDetailObj.salePrice}}元领取</a>
        <a  @click="startApply" ca="zc_v170628_zcdetail_sqclick" v-if="testDetailObj.status===21&&!testDetailObj.participate">立即申请</a>
        <a  href="javascript:;" ca="zc_v170804_zcdetail_wzmore_click"  @click="pingUrl(testDetailObj)" v-if="testDetailObj.status === 23 || testDetailObj.status === 11" class="btn">查看众测报告</a>
      </div>        
    </section>
    <section  v-if="isApp&&testDetailObj.status===21&&testDetailObj.participate" class="footStatus">
      <p><span class="applyed">已申请</span> 请耐心等待入选名单公布</p>    
    </section>
    <section v-if="isApp&&testDetailObj.status===22" class="footStatus">
      <p><span>测评中</span><cite class="time"><i>{{dd}}</i><b>天</b><i>{{hh}}</i><b>时</b><i>{{mm}}</i><b>分</b><i>{{ss}}</i><b>秒后结束</b></cite></p>
    </section>
  <!--<div v-else>
   <div class="sub-layout" v-if="testDetailObj.status===10&&testDetailObj.type=='s'">
     <a @click="goGoodsDetailUrl(testDetailObj.targetURL)" ca="zc_v170628_zcdetail_lqclick">立即领取</a>
   </div>
    <div class="sub-layout" v-if="testDetailObj.status===11&&testDetailObj.type=='s'">
     <a :href="commondev+'/cx/cxj/cxjweb/publicTest/commentList/commentList.'+ isHtml +'?sid='+testDetailObj.sid" ca="zc_v170628_zcdetail_cpbgclick">查看测评报告</a>
   </div>
    <div class="sub-layout" v-if="testDetailObj.status===21&&testDetailObj.type!='s'&&!testDetailObj.participate">
     <a  @click="startApply" ca="zc_v170628_zcdetail_sqclick">立即申请</a>
   </div>
   <div class="sub-layout gray" v-if="testDetailObj.status===21&&testDetailObj.type!='s'&&testDetailObj.participate">
    <a href="javascript:void(0);">已申请</a>
      </div>
    <div class="sub-layout gray" v-if="testDetailObj.status===22&&testDetailObj.type!='s'">
     <a href="javascript:void(0);">申请已结束，测评中...</a>
   </div>
   <div class="sub-layout" v-if="testDetailObj.status===23&&testDetailObj.type!='s'">
     <a :href="commondev+'/cx/cxj/cxjweb/publicTest/commentList/commentList.'+ isHtml +'?sid='+testDetailObj.sid">查看测评报告</a>
   </div>
   </div>-->
   <a href="javascript:;" v-if="!isShowShareBtn&&isApp" class="shareGuide" @click="share"></a>
</div>
</template>

<script>
import common from "../../../assets/js/common.js";
import {Toast, Popup} from 'mint-ui';
import Vue from 'vue';
Vue.component(Popup.name, Popup);
export default {
    data: function() {
        return {
           freeTime:"",
           dd:0,
           hh:0,
           mm:0,
           ss:0,
           commondev:common.isdev(),
           isHtml:common.isHtml(),
           curdata:{},
           testDetailObj: {             // 众测活动项目        
              /* "sid": "s1",                   // 活动项目编号
               "type": "f",                   // 活动类别： s - 特价众测，f - 免费众测
               "targetURL": "http://xxx/xxxx...", // 目标商品页面网页
               "title": "车享定制雨刷",         // 标题
               "subtitle": ["高端无骨雨刷", "耐用、静音"],     // 副标题
               "picture": "http://xxxxx.png",  // 活动项目图片
               "total": 9999,                 // 总数（限量）
               "countAvailable": 60,          // 剩余数量
               "price": "396",                // 原价
               "salePrice": "80",             // 折扣价
               "timeToExpire": 123456,        // 活动结束剩余时间（毫秒），既“当前系统日期”到“结束日期“的相对时间差值
               "status": 22,                  // 活动状态（说明见备注）
               "memo": {                      // 活动备注
                  "icon": "http://xxxxx.png",   // 图标
                  "descr": " [敢写就敢送]活动期间xxxxx... "       // 描述（注：该文字中 #xxx# "#"之间的文字表示要显示为红色）
               },
        
               "numberOfParticipants": 1000,       // 已参与人数
               "detail":  "<html>xxxx...</html>"   // 详细描述（富文本）*/
            },
            GeekListObj: [/*{         // 人员名单列表
              "id": "001",      // 人员id
              "name": "xxxx",   // 人员名称
              "icon": "http://xxxx/xxxx.png"    // 人员头像
             },
             {         // 人员名单列表
                "id": "002",      // 人员id
                "name": "yyyyy",   // 人员名称
                "icon": "http://xxxx/yyyy.png"    // 人员头像
             },
             {         // 人员名单列表
                "id": "003",      // 人员id
                "name": "zzzz",   // 人员名称
                "icon": "http://xxxx/xxxx.png"    // 人员头像
             }*/],
             peopleListHeight:"",
             arrowUp :false,
             isApp:common.isApp(),
             downloadUrl:'//cxb.chexiang.com/service/version/getLatestAppVersion/0?channel=cx_cxj_xzy_0628_zc',
             isLogin:false,
             isShowShareBtn:common.checkAppversionIsGt35() || false,
             shareObj:{},
             signUrl:process.env.NODE_ENV == 'sit' || process.env.NODE_ENV == "development" ? common.isEnv("//recruit") : common.isEnv("//wx")  ,
             getDateUrl:common.isdev() + '/zhongce/content.htm',
             showMore:"查看更多",
             toShowMenu:false
        }
    },
    computed: {
     
    },
    mounted: function() {
      this.initData();
      this.initGeekList();
      var _this = this;
		//打点
		_this.$nextTick(function () {
			common.ANA_AnalyticsScan();
		});
    },
    components: {  },
    methods: {
      getQueryString:function(name) {
        var str = window.location.search.substr(1);
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = str.match(reg);
        if (r != null) return decodeURIComponent(r[2]); return null;
      },
      initData:function(){
           var sid = this.getQueryString("sid");
           console.log(sid);
           var _this = this;
           _this.$http.get(common.isdev()+"/zhongce/item.htm?sid="+sid+"&t="+Date.now()).then(function(d){
                var data = d.data,
                obj  = data.obj,
                errorCode = data.errorCode;
                if(errorCode === "1"){
                  _this.testDetailObj = data.obj;
                  var obj = _this.testDetailObj;
                  var ts = obj.timeToExpire;
                  _this.setDiscountTime(ts);
                  _this.ininShareData(data.obj);
               }
                //打点
				_this.$nextTick(function () {
					common.ANA_AnalyticsScan();
				});
            },function(err){
                if(err.status == 408){
                  Toast(err.status);
                }else{Toast("系统异常，请稍后再试");}
          })

      },
      initGeekList:function(){
           var _this = this;
           var sid = this.getQueryString("sid");
           _this.$http.get(common.isdev()+"/zhongce/participants.htm?sid="+sid+"&t="+Date.now()).then(function(d){
                var data = d.data,
                obj  = data.obj,
                errorCode = data.errorCode;
                if(errorCode === "1"){
                  _this.GeekListObj = data.obj; 
                  if(_this.GeekListObj.length>12){
                    _this.peopleListHeight = "16rem";
                  }
               }
                //打点
				_this.$nextTick(function () {
					common.ANA_AnalyticsScan();
				});
            },function(err){
                if(err.status == 408){
                  Toast(err.status);
                }else{Toast("系统异常，请稍后再试");}
          })
      },
      showPeopleListMore:function(){
         this.peopleListHeight == "auto"? this.peopleListHeight = "16rem":this.peopleListHeight = "auto";
         this.arrowUp = !this.arrowUp;
         this.showMore = this.arrowUp?"收起":"查看更多";
      },
      setDiscountTime:function(t){ 
            var _this = this;
            //var ts = ((new Date(2017, 6, 7, 7, 0, 0)) - (new Date()))/1000;//计算剩余的毫秒数  
            var ts = t/1000;//计算剩余的毫秒数  
            var lastTime = +new Date;    
            setInterval(function() {
              if(Math.abs(+new Date - lastTime) > 3000) {
                  console.log("从后台切回");                 
                  ts = ts - parseInt(Math.abs(+new Date - lastTime)/1000);
              }
              lastTime = +new Date;
             }, 1000);
            setInterval(function() {
                ts--;
                var dd = parseInt(ts  / 60 / 60 / 24, 10)<0?0:parseInt(ts  / 60 / 60 / 24, 10);//计算剩余的天数  
                var hh = parseInt(ts  / 60 / 60 % 24, 10)<0?0:parseInt(ts  / 60 / 60 % 24, 10);//计算剩余的小时数  
                var mm = parseInt(ts  / 60 % 60, 10)<0?0:parseInt(ts  / 60 % 60, 10);//计算剩余的分钟数  
                var ss = parseInt(ts  % 60, 10)<0?0:parseInt(ts  % 60, 10);//计算剩余的秒数  
                _this.dd = dd;
                _this.hh = hh;
                _this.mm = mm;
                _this.ss = ss;
                if (_this.toShowMenu) {
                  _this.toShowMenu = false;
                  _this.initData();
                  _this.initGeekList();
                }
                /*var discountTime = dd+"天"+hh+"小时"+mm+"分钟"+ss+"秒后结束";
                console.log(discountTime,"timeToExpire");*/
              // console.log(discountTime);
                //_this.testListObj[i].timeToExpire = discountTime;
               // console.log(_this.testListObj[i].timeToExpire);
            }, 1000);      
       },          
        checkLogin:function( fn ){
          var e = this;
          e.$http.get(common.isdev() + '/zhongce/checkLogin.htm?sid=' +e.testDetailObj.sid).then((d)=>{
            var result = d.body.result, url = d.body.msg;
            if(result == -99 ){
              window.location.href = url;
            }else{
              e.isLogin = true;
              if(typeof fn == "function") fn();
            }
          },(err)=>{
            Toast("网络异常");
          });
        }, 
        startApply:function(){
           var _this =  this;
           _this.checkLogin(function(){
           /* if(common.isdev()=="development"){
             window.location.href = common.isdev()+'/publicTest/freeTestSubmit/freeTestSubmit.'+ common.isHtml() +'?sid='+_this.testDetailObj.sid;
            }else{*/
           var h = '../freeTestSubmit/freeTestSubmit.'+ common.isHtml() +'?sid='+_this.testDetailObj.sid;
           /*if(_this.isShowShareBtn&&_this.isApp) {
              lb.newWebview({url:h},function (data) {
                if(data.errorCode == 0){
                  console.log("打开成功");
                }
              })
            }else{
              window.location.href = h;
            }  */
            _this.toShowMenu = true;
            window.location.href = h;
           // }
           })
        },
        goGoodsDetailUrl:function(url){
          var _this =  this;
          if(_this.isShowShareBtn&&_this.isApp) {
            lb.newWebview({url:url},function (data) {
              if(data.errorCode == 0){
                console.log("打开成功");
              }
            })
          }else{
            window.location.href = url;
          }
        },
        ininShareData:function(obj){
            var _this = this;  
            //window.document.title =  obj.title;  
           //分享数据配置
            _this.shareObj = {
              friend: {
                title:obj.title+",车享家请你来评测啦！",
                desc: "还在等什么？名额有限喔～",
                link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?utm_source=share&sid='+obj.sid,
                imgUrl: window.location.protocol +obj.picture
              },
              friendQuan: {
                title:"",
                desc: obj.title+",车享家请你来评测啦！",
                link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?utm_source=share&sid='+obj.sid,
                imgUrl: window.location.protocol + obj.picture
              }
            };
            if(!common.isApp()){  
              common.wxShare(_this);
            }else{
              if(_this.isShowShareBtn){
                _this.share();
              }
             // e.isShowShareBtn = !common.checkAppversionIsGt35();
            }    
        },
        share:function(){
           var _this = this;
           common.appShare(_this);
        },
        pingUrl(item) {
          var vm = this;
          let winUrl = encodeURI(encodeURI('../commentList/commentList.' + vm.$data.isHtml + '?sid=' +item.sid+ '&imgUrl=' + item.picture + '&title='+ item.title +'&url=discountDetail/discountDetail.' +vm.$data.isHtml+ '?sid='+item.sid));
          window.location.href = winUrl;
        }
    }
}

</script>

<style lang="scss">
@import '../../../assets/css/common.scss';
@function rem($px){
  @return $px / 20 * 1rem;
}
body{
  background-color:#edf0f5;
  margin:0 auto !important;
  padding-bottom:rem(60);
}
.proDetail{padding:rem(30) rem(32);background:$_fff;margin-bottom:rem(16);display:flex;width:100%;max-height:rem(300);overflow:hidden;
  .proImg{width:rem(240);height:rem(240);overflow:hidden;margin-right:rem(22);position:relative;
      img{width:100%;height:100%;}
    .style{background:#0084FF;color:$_fff;border-radius:0 rem(20) rem(20) 0;padding:0 rem(10);position:absolute;top:0;left:0;z-index:5;width:rem(46);height:rem(32)}
    .t{background:#00C240;}
  }
  .proInfo{flex:1;width:100%;overflow:hidden;
    h2{font-size:rem(34);color:#0a1825;margin-bottom:rem(10);max-height:rem(150);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
    .des{
      li{color:#707070;font-size:rem(30);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      }
    }
  }    
}
.proState{
  background:$_fff;padding:rem(10) 0;display:flex;align-items:center;
  p{width:100%;height:rem(120);text-align:center;
    padding-top:rem(4);
    i{
      color:#0084ff;font-size:rem(54);font-weight:bold;
      b{font-size:rem(34);}
    }
    span{color:$_666;font-size:rem(26);display:block;}
    &:first-child{border-right:1px solid #e8e8e8;}
  }
}
.process{display:flex;align-items:center;margin-bottom:rem(16);background:#fafafa;height:rem(88);color:$_fff;padding:0 rem(28);counter-reset:num;
  li{font-size:rem(26);color:$_666;width:100%;
    &:before{content:counter(num);counter-increment:num;text-align:center;color:$_fff;width:rem(30);height:rem(30);line-height:1.2;background:$_666;display:inline-block;vertical-align:middle;margin-right:rem(8);border-radius:50%;}
  }
}
.comment-lists{
  background:$_fff;
  padding:rem(30) 0 rem(30) rem(30);
  margin-bottom:rem(16);
  h3{color:$_333;font-size:rem(30);}
  .lists{
    li{padding:rem(20);border-bottom:1px solid #e8e8e8;
      &:last-child{border-bottom:none;padding-bottom:0;
        .userinfo{margin-bottom:0}
      }
      .userinfo{margin-bottom:rem(20);
        .thumb{width:rem(72);height:rem(72);border-radius:50%;background:#959595;display:inline-block;vertical-align:top;
          img{width:rem(72);height:rem(72);border-radius:50%;}
        }
        .infos{display:inline-block;width:82%;margin-left:rem(10);vertical-align:middle;
          .username{color:$_999;font-size:rem(26)}
          .des{color:#333;font-size:rem(30);display:block;margin-top:rem(4);line-height:rem(40);
          }
        }
      }            
    }
  }
  .more{border:1px solid #979797;border-radius:rem(108);width:rem(188);height:rem(60);line-height:rem(60);text-align:center;font-size:rem(30);color:#888;display:block;margin:rem(60) auto rem(15);}
}
.slide{
  position:relative;
  img{
    display:block;
    width:rem(750);
  }
  .type{
    display:inline-block;
    width:rem(133);
    height:rem(40);
    line-height:rem(40);
    background-color:#108ee9;
    text-align:center;
    color:#fff;
    font-size:rem(24);
    position:absolute;
    top:rem(25);
    left:rem(0);
    border-radius:0 rem(5) rem(5) 0;
  }
}
.goods-detail{
  padding:rem(20);
  background-color:#fff;
  border-bottom:1px solid #dddedf;
  h2{
    font-size:rem(38);
    padding:rem(10) 0;
  }
  .des{
    font-size:rem(24);
    margin-bottom:rem(26);
  }
  .time{
    font-size:rem(24);
    margin-bottom:rem(26);
    position:relative;
    i{
      display:inline-block;
      background-color:#375265;
      height:rem(30);
      line-height:rem(30);
      padding:0 rem(5);
      border-radius:rem(3);
      color:#fff;
      margin-right:rem(4)
    }
    b{
      margin:0 rem(5);
      font-weight:normal;
      color:#375265;
    }
    span{
      position:absolute;
      right:0;
    }
  }
}
.price{
  font-size:rem(32);
  position:relative;
  border-top:1px solid #f1f1f1;
  padding-top:rem(16);
  strong{
    font-weight:normal;
    color:#ff3b3b;
  }
  b{
    font-weight:normal;
  }
  span{
    font-size:rem(26);
    text-decoration: line-through;
    color:#afafaf;
    margin-left:rem(20)
  }
  cite{
    color:#595959;
    font-size:rem(20);
    position:absolute;
    right:0;
    i{
      color:#ff3b3b;
      font-size:rem(28);
    }

  }
}
.info{
  display:flex;
  flex-wrap:wrap;
  height:rem(110);
  line-height:rem(110);
  background-color:#fafbfb;
  margin-top:rem(16);
  li{
      margin-left:rem(22);
      font-size:rem(24);
      clear:both;
      overflow:hidden;
    i{
      display:block;
      height:rem(45);
      text-align:center;
      margin-right:rem(15);
      float:left;
    }
    i.icon01 img{
      width:rem(41);
    }
    i.icon02 img{
      width:rem(37);
    }
    i.icon03 img{
      width:rem(50);
    }
    i.icon04 img{
      width:rem(38);
    }
     i.icon05 img{
      width:rem(41);
    }
     i.icon06 img{
      width:rem(41);
    }
     i.icon07 img{
      width:rem(49);
    }
     i.icon08 img{
      width:rem(49);
    }
  }
}
.test-people-list{
  background-color:#fff;
  border:1px solid #dddedf;
  margin-bottom:rem(17);
  h2{
    font-size:rem(30);
    padding-top:rem(30);
    padding-bottom:rem(20);
    margin-left:rem(20);
  }
  ul{
    width:rem(750);
  }
  li{
    margin:rem(17);
    text-align:center;
    width:rem(90);
    float:left;
    img{
      width:rem(90);
      height:rem(90);
    }
    p{
      padding-top:rem(5);
      height: rem(31);
      overflow: hidden;
    }
  }
  .more{
    text-align:center;
    font-size:rem(24);
    color:#888;
    height:rem(80);
    line-height:rem(80);
    border-top:1px solid #e8e8e8;
    img{
      width:rem(20);
    }
    i{
      margin-left:rem(10);
      display:inline-block;
      margin-top:-2px;
    }
    .morespan{
      display:inline-block;
      padding-right:rem(25);
      background:transparent url(../../../assets/image/publicTest/arrow.png) no-repeat right center;
      background-size:rem(20);
    }
    .arrowUp{
      background:transparent url(../../../assets/image/publicTest/arrowup.png) no-repeat right center;
      background-size:rem(20);
    }
  }

  .test-people-list-layout{
    overflow:hidden;
  }
}
.product-intro{
  background-color:#fff;
  h2{
    height:rem(80);
    line-height:rem(80);
    padding-left:rem(20);
    font-size:rem(30);
  }
  .content{
    padding:rem(20);
    padding-bottom: rem(115);
    min-height:rem(600);
    img{
       width:rem(710);
    }
  }
}
.sub-layout{
  width:100%;
  background-color:#fff;
  height:rem(118);
  padding:rem(15) rem(20);
  position:fixed;
  bottom:0;
  left:0;
  box-shadow:0px -5px 10px #999;   
  -webkit-box-shadow:0px -5px 10px #999;  
  -moz-box-shadow:0px -5px 10px #999;   
  a{
     height:rem(88);
     display:inline-block;
     width:100%;
     text-align:center;
     background-color:#ff6600;
     color:#fff;
     line-height:rem(88);
     font-size:rem(34);
     border-radius:rem(10)
  }
}
.gray{
  a{
    background-color:#bfbfbf;
  }
}
.download-banner{
  width:100%;
  background-color:#fff;
  height:rem(118);
  padding:rem(15) rem(20);
  position:fixed;
  bottom:0;
  left:0;
  box-shadow:0px -5px 10px #999;   
  -webkit-box-shadow:0px -5px 10px #999;  
  -moz-box-shadow:0px -5px 10px #999;  
  a{
     display:block;
     background:transparent url(../../../assets/image/publicTest/cxj-icon.png) no-repeat left center;
     height:rem(70);
     line-height:rem(36);
     background-size:rem(70) rem(70);
     font-size:rem(28);
     padding-left:rem(90);
     color:#108ee9;
     margin-top:rem(10);
     span{
       display:inline-block;
       width:rem(170);
       height:rem(60);
       border:1px solid #108ee9;
       border-radius:rem(10);
       text-align:center;
       line-height:rem(60);
       position:absolute;
       right:rem(20);
       top:rem(30);
     }
  }
}
.item-states{
    @at-root .flex{display:flex;}
    .left{
      width:rem(1200);
      .process{
        width:rem(360);
        height:rem(30);
        border:1px solid #ff6600;
        border-radius:rem(20);
        text-align:center;
        position:relative;
        margin:0 rem(34) rem(12) 0;
        .bar{
          position:absolute;
          top:0;
          left:0;
          z-index:1;
          width:100%;
          height:100%;
          background:#ffe6d6;
          border-radius:rem(20) 0 0 rem(20);
        }
        span{
          position:absolute;
          z-index:2;
          left:0;
          width:100%;
        }
      }
      .statusBtn{
        font-size:rem(22);
        cite{
          color:#0084ff;
          font-size:rem(30);
          display:block;
        }
        span{font-size:rem(26);}
        .time{
          color:$_999;white-space:nowrap;font-size:rem(26);
          i{padding:0 rem(5);color:#000;
            &:first-child{padding-left:0;}
          }
        }
        .end{color:$_999;}
      }
    }
    .right{
      width:100%;
      height:rem(80);
      text-align:right;
      .btn{
        width:rem(230);
        height:100%;
        text-align:center;
        line-height:rem(80);
        display:inline-block;
        background:#ff6600;
        border-radius:rem(8);
        color:$_fff;
        font-size:rem(30);
      }

    }
  }
.footStatus{position:fixed;bottom:0;width:100%;background:#EDF8FF;height:rem(88);line-height:rem(88);text-align:center;font-size:rem(30);color:$_333;
  span{font-size:rem(34);color:#0084ff;margin-right:rem(18);position:relative;}
  .applyed:before{content:"";position:absolute;left:rem(-50);top:rem(5);background:url(../../../assets/image/publicTest/dot-sure.png) no-repeat;width:rem(36);height:rem(36);background-size:100% 100%;}
  .time{
    color:$_999;white-space:nowrap;font-size:rem(26);
    i{padding:0 rem(5);color:#000;
      &:first-child{padding-left:0;}
    }
  } 
}
.shareGuide{
  width:rem(100);
  height:rem(100);
  line-height:rem(100);
  text-align:center;
  color:$_fff;
  background:transparent url("../../../assets/image/publicTest/share-icon.png") no-repeat top left;
  background-size:100% 100%;
  border-radius:50%;
  position:fixed;
  right:rem(10);
  top:50%;
  z-index:3;
  font-size:rem(26)
}
</style>


